<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>MOCK FOR HANDLEBARS</title>
    <link href="assets/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="../node_modules/codemirror/lib/codemirror.css" rel="stylesheet">
    <link href="../node_modules/codemirror/theme/neat.css" rel="stylesheet">
    <link href="assets/mock.css" rel="stylesheet">
</head>
<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" href="http://mockjs.com">Mock.js</a>
        </div>
        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class=""><a href="./mock.html">Data</a></li>
                <li class="active"><a href="./mock4tpl.html">Handlebars &amp; Mustache</a></li>
                <li class=""><a href="./mock4xtpl.html">KISS XTemplate</a></li>
                <li class=""><a href="https://github.com/nuysoft/Mock">Github</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li><a id="save" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-ok-sign"></i> Save</a></li>
                <li><a id="beautifier" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-eye-open"></i> Beautifier</a></li>
                <li><a id="share" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-share-alt"></i> Share</a></li>
                <li><a id="account" class="btn btn-small disabled" href="#"><i class="glyphicon glyphicon-user"></i> Login/Sign up</a></li>
            </ul>
        </div>
    </nav>

    <div class="sidebar"></div>
    <div class="content clearfix">
        <div class="window float-left">
            <textarea id="editor">
<div bx-tmpl="list" bx-datakey="list">
  <table class="table" bx-name="tables" bx-path="brix/gallery/tables/" id="tables">
    <thead>
      <tr>
        <th></th>
        <th>访问来源</th>
        <th width="200px">UV占比</th>
        <th>UV</th>
        <th>PV</th>
        <th>人均页面访问数</th>
        <th>宝贝收藏数</th>
        <th>收藏率</th>
        <th>成交金额</th>
        <th>转化率</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      {{#each list}}
      <tr class="tr-parent bold">
        <td><i mx-click="toggle" class="J_expendCollapse icon-expend"></i></td>
        <td>{{id}} {{分组}}</td>
        <td>
          <span class="process-parent" style="width: {{UV占比}}px;"></span>
          {{UV占比}}%
        </td>
        <td>{{UV}}</td>
        <td>{{PV}}</td>
        <td>{{人均页面访问数}}</td>
        <td>{{宝贝收藏数}}</td>
        <td>{{收藏率}}</td>
        <td>{{成交金额}}</td>
        <td>{{转化率}}</td>
        <td>
        </td>
      </tr>
      {{#each children}}
      <tr class="tr-child">
        <td></td>
        <td>{{渠道}}</td>
        <td>
          <span class="process-child" style="width: {{UV占比}}px;"></span>
          {{UV占比}}%
        </td>
        <td>{{UV}}</td>
        <td>{{PV}}</td>
        <td>{{人均页面访问数}}</td>
        <td>{{宝贝收藏数}}</td>
        <td>{{收藏率}}</td>
        <td>{{成交金额}}</td>
        <td>{{转化率}}</td>
        <td>
          <div class="operation">
            <a href="javascript:" mx-click="perspective{ srcIdLevel1:{{srcIdLevel1}},srcIdLevel2:{{srcIdLevel2}},channel:{{渠道}},vs:{{vs}} }" class="mr10">透视分析</a>
          </div>
        </td>
      </tr>
      {{/each}}
      {{/each}}
    </tbody>
  </table>
</div>
<!-- Mock {
    'id|+1': 1,
    'list|1-5': [],
    'children|1-5': [],
    '分组|1': '@AREA',
    '渠道|1': '@REGION',
    'percent|1-100': 1,
    'UV占比|1-100': 1,
    'UV|1-100000000': 1,
    'PV|1-100000000': 1,
    '人均页面访问数|1-100000000': 1,
    '宝贝收藏数|1-100000000': 1,
    '收藏率': '@percent%',
    '成交金额|1-100000000.2': 1.0,
    '转化率': '@INTEGER(1,100)%',
    'srcIdLevel1|1-10': 1,
    'srcIdLevel2|1-10': 1,
    'vs': '@渠道'
}
--></textarea>
        </div>
        <div class="handler" id="handler_vertical" style="left: 50%;"></div>
        <div class="window float-right">
            <textarea id="result"></textarea>
        </div>
    </div>

    <script src="../node_modules/jquery/tmp/jquery.js"></script>
    <script src="../node_modules/codemirror/lib/codemirror.js"></script>
    <script src="../node_modules/codemirror/mode/javascript/javascript.js"></script>
    <script src="../node_modules/codemirror/mode/css/css.js"></script>
    <script src="../node_modules/codemirror/mode/vbscript/vbscript.js"></script>
    <script src="../node_modules/codemirror/mode/xml/xml.js"></script>
    <script src="../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <script src="../node_modules/codemirror/mode/coffeescript/coffeescript.js"></script>
    
    <script src="../dist/mock.js"></script>

    <script src="../node_modules/handlebars/dist/handlebars.js"></script>
    
    <script type="text/javascript">
        var mode = 'htmlmixed';
    </script>
    <script src="./assets/editor.js"></script>
    <script type="text/javascript">
        $(function(){
            function handle(instance, changeObj){
                var tpl = instance.getValue();
                var ast, data;
                try {
                    ast = Handlebars.parse(tpl);
                    data = Mock.tpl(tpl);
                } catch( error ) {
                    console.error(error.stack);
                    data = error.toString();
                }
                result.setValue(JSON.stringify(data, null, 4));
                return handle
            }
            editor.on('change', handle(editor));
        });
    </script>
    
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-27059428-2', 'mockjs.com');
      ga('send', 'pageview');
    </script>
</body>
</html>
